<template>
  <div>
    <!--推荐内容-->
    <container>
      <div class="text-3xl font-bold pb-2 pt-6">推荐内容</div>
    </container>
    <Container>
      <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 w-full lt-sm:px-4">
        <a :href="item.url" target="_blank" v-for="(item, index) in recommand" :key="index" class="flex">
          <Card class="w-full rounded-3 transition-all hover:(transform-translate-y--1 shadow-lg)" :image="item.image"
            image-type="rounded" :title="item.title" border>
            <template #default>
              <div class="mx-4 flex items-center justify-start text-gray-500 mb-4">
                <span class="mr-2">Brian</span>|
                <span class="ml-2">前端课程</span>
              </div>
              <div class="mx-4 flex items-center justify-between text-gray-500 mb-4">
                <div>
                  <span class="mr-2">￥3999.00</span>
                  <span>2000人学习</span>
                </div>
                <div class="i-mdi:cart text-3xl text-sky-400"></div>
              </div>
            </template>
          </Card>
        </a>
      </div>
    </Container>
    <!--每日一课-->
    <container class="flex-col">
      <!--tabs-->
      <tabs :items="['Jave','Vue','React','小程序']" v-model="activeIndex"/>
      <!--grid-->
      <div class="grid grid-cols-6">
        <div class="col-start-1 col-span-2"></div>
        <div class="col-start-3 col-span-4">
          <div class="grid grid-cols-4 grid-rows-2 gap-3">
             <a :href="item.url" target="_blank" v-for="(item, index) in [recommand[0]]" :key="index" class="flex">
          <Card class="w-full rounded-3 transition-all hover:(transform-translate-y--1 shadow-lg)" :image="item.image"
            image-type="rounded" :title="item.title" border>
            <template #default>
              <div class="mx-4 flex items-center justify-start text-gray-500 mb-4">
                <span class="mr-2">Brian</span>|
                <span class="ml-2">前端课程</span>
              </div>
              <div class="mx-4 flex items-center justify-between text-gray-500 mb-4">
                <div>
                  <span class="mr-2">￥3999.00</span>
                  <span>2000人学习</span>
                </div>
                <div class="i-mdi:cart text-3xl text-sky-400"></div>
              </div>
            </template>
          </Card>
        </a>
          </div>
        </div>
      </div>
    </container>
    <!--精品微课-->
    <container>
      <div class="text-3xl font-bold pb-2 pt-6">精品微课</div>
    </container>
    <Container>
      <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 w-full lt-sm:px-4">
        <a :href="item.url" target="_blank" v-for="(item, index) in recommand" :key="index" class="flex">
          <Card class="w-full rounded-3 transition-all hover:(transform-translate-y--1 shadow-lg)" :image="item.image"
            image-type="rounded" :title="item.title" border>
            <template #default>
              <div class="mx-4 flex items-center justify-start text-gray-500 mb-4">
                <span class="mr-2">Brian</span>|
                <span class="ml-2">前端课程</span>
              </div>
              <div class="mx-4 flex items-center justify-between text-gray-500 mb-4">
                <div>
                  <span class="mr-2">￥3999.00</span>
                  <span>2000人学习</span>
                </div>
                <div class="i-mdi:cart text-3xl text-sky-400"></div>
              </div>
            </template>
          </Card>
        </a>
      </div>
    </Container>
    <!--学习计划-->
    <container>
      <div class="text-3xl font-bold pb-2 pt-6">学习计划</div>
    </container>
    <container>
      <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
        <div class=" w-full lt-sm:px-4 py-4 flex items-center justify-center transition-all hover:(transform-translate-y--1 shadow-lg) group" v-for="(item, index) in recommand"
          :key="index">
          <div class=" h-full bg-cover bg-center w-full rounded-3 overflow-hidden"
            :style="{ 'background-image': 'url(' + item.image + ')' }">
            <div class=" bg-black bg-opacity-30 w-full h-full group-hover:display-none"></div>
          </div>
          <div class="z-30 px-4 line-clamp-3 text-xl text-white">
            {{ item.title }}
          </div>
        </div>
      </div>

    </container>
    <!--优质专栏-->
    <container>
      <div class="text-3xl font-bold pb-2 pt-6">优质专栏</div>
    </container>
    <Container>
      <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 w-full lt-sm:px-4">
        <a :href="item.url" target="_blank" v-for="(item, index) in recommand" :key="index" class="flex">
          <Card class="w-full rounded-3 transition-all hover:(transform-translate-y--1 shadow-lg)" :image="item.image"
            image-type="rounded" :title="item.title" border>
            <template #default>
              <div class="mx-4 flex items-center justify-start text-gray-500 mb-4">
                <span class="mr-2">Brian</span>|
                <span class="ml-2">前端课程</span>
              </div>
              <div class="mx-4 flex items-center justify-between text-gray-500 mb-4">
                <div>
                  <span class="mr-2">￥3999.00</span>
                  <span>2000人学习</span>
                </div>
                <div class="i-mdi:cart text-3xl text-sky-400"></div>
              </div>
            </template>
          </Card>
        </a>
      </div>
    </Container>

  </div>
</template>

<script setup lang="ts">
import bg from '@/assets/images/bg.png'

const activeIndex=ref(1)

const recommand = ref([{
  image: bg,
  title: '传播技术的种子',

  url: 'https://www.baidu.com/'
},
{
  image: bg,
  title: '传播技术的种子',

  url: 'https://www.baidu.com/'
},
{
  image: bg,
  title: '传播技术的种子',

  url: 'https://www.baidu.com/'
},
{
  image: bg,
  title: '传播技术的种子',

  url: 'https://www.baidu.com/'
}])

</script>

<style scoped></style>
<route lang="yaml">
meta:
  layout: default
</route>